<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="currents" :values="values" @clickItem="onClickItem" styleType="button"
				activeColor="#FF6F61"></uni-segmented-control>
			<view class="content">
				<view v-show="currents === 0">
					选项卡1的内容
				</view>
				<view v-show="currents === 1">
					选项卡2的内容
				</view>
				<view v-show="currents === 2">
					选项卡3的内容
				</view>
			</view>
		</view>
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id">
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">
					{{item.content}}
				</view>
				<view class="author">
					— {{item.author}}
				</view>
			</view>
		</view>

		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="reload" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="arrow-up" size="26" color="#888"></uni-icons>
			</view>
			<!-- <view class="box"></view> -->
		</view>

		<view class="loadMore">
			<uni-load-more icon-type="circle" :status="status"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';

	import {
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	const pets = ref([])
	const status = ref("more")


	// 点击菜单
	const currents = ref(0)
	const segitem = [{
		key: "all",
		value: "全部"
	}, {
		key: "dog",
		value: "狗"
	}, {
		key: "cat",
		value: "猫"
	}, ]

	const values = computed(() =>
		segitem.map(item =>
			item.value
		)
	)
	
	const onClickItem = (e) => {
		currents.value = e.currentIndex
		pets.value = []
		network()
		console.log(e)
	}


	// 点击预览
	const onPreview = function(index) {
		console.log(index)
		let urls = pets.value.map(item => item.url)

		uni.previewImage({
			current: index,
			urls: urls
		})
	}

	// 点击刷新
	const onRefresh = function() {
		console.log('刷新')
		uni.startPullDownRefresh()
	}

	// 点击返回顶部
	const onTop = () => {
		console.log('顶部')
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100
		})
	}

	function network() {
		console.log(segitem[currents.value].value)
		uni.showNavigationBarLoading()
		status.value = 'loading'
		uni.request({
			url: "https://tea.qingnian8.com/tools/petShow",
			data: {
				size: 5,
				type: segitem[currents.value].key
			},
			// api地址访问次数 https://api.qingnian8.com/apis/
			// access-key:9527QwaS.:羊毛出在猪身上狗来买单
			header: {
				'access-key': "9527QwaS."
			}
		}).then(res => {
			if (res.data.errCode === 0) {
				uni.showNavigationBarLoading()
				console.log(res)
				pets.value = [...pets.value, ...res.data.data]
			} else if (res.data.errCode === 400) {
				uni.showToast({
					title: res.data.errMsg,
					icon: 'none'
				})
			}
		}).catch(err => {
			uni.showToast({
				title: "请求有误，稍后刷新",
				icon: 'none'
			})
		}).finally(() => {
			status.value = 'noMore'
			uni.hideNavigationBarLoading()
			uni.stopPullDownRefresh()
		})
	}


	// 触底加载
	onReachBottom((res) => {
		network();
	})


	// 下拉刷新,要先在pages.json配置,打开当前页面的下拉刷新
	onPullDownRefresh(() => {
		pets.value = []
		network();
	})



	network();
</script>

<style lang="scss" scoped>
	.container {
		.menu {
			padding: 50rpx 50rpx 0;
		}

		.layout {
			padding: 50rpx;

			.box {
				margin-bottom: 60rpx;
				box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.08);
				border-radius: 20rpx;
				overflow: hidden;

				.pic {
					image {
						width: 100%;
					}
				}

				.text {
					padding: 30rpx;
					color: #333;
					font-size: 36rpx;
				}

				.author {
					padding: 0 30rpx 30rpx;
					text-align: right;
					color: #888;
					font-size: 28rpx;
				}
			}
		}

		.loadMore {
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}

		.float {
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding-bottom: env(safe-area-inset-bottom);

			.item {
				width: 90rpx;
				height: 90rpx;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 50%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #eee;
			}

			// .box{
			// 	height: env(safe-area-inset-bottom);
			// }
		}
	}
</style>